<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="state.title"
    width="85%"
    :closable="false"
    :footer-style="{ textAlign: 'right' }"
    @close="closeDrawer"
  >
    <oss-page
      ref="ossRef"
      is_select
      :is_more="false"
      @GetSelectImg="selectImg"
    ></oss-page>
    <template #footer>
      <a-button style="margin-right: 8px" @click="closeDrawer">取消</a-button>
      <a-button type="primary" @click="handleConfirm">确定</a-button>
    </template>
  </a-drawer>
</template>
<script setup>
import { reactive, ref } from "vue";
import OssPage from "@/views/System/oss/index.vue";

const emits = defineEmits(["drawer-success"]);
const ossRef = ref();
const state = reactive({
  visible: false,
  title: "选择图片",
  img: "",
});

const show = () => {
  state.visible = true;
  ossRef.value?.clearImg();
};
const hide = () => {
  state.visible = false;
};
const selectImg = (values) => {
  state.img = values;
};
const closeDrawer = () => {
  hide();
};
const handleConfirm = () => {
  emits("drawer-success", state.img);
  hide();
};

defineExpose({
  show,
});
</script>
